<template>
  <div class="app-container" style="width: 95%;max-width: 700px;">
     <el-row style="margin:14px 0">
      <el-col :span="24">
        <el-button @click="dialogFormVisible=true">添加银行卡</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="卡主姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.cardowner }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="归属银行">
        <template slot-scope="scope">
          <span>{{ scope.row.bankname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="银行卡号">
        <template slot-scope="scope">
         <span>{{ scope.row.bankcard }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="120">
        <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit" @click="editShow(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

     <!--列表数据添加/编辑开始  -->
    <el-dialog v-if="dialogFormVisible" :title="dialogTitle" :visible.sync="dialogFormVisible" class="users" width="95%" center @close="closed">
      <el-form ref="ruleForm" :model="formRow">
        <el-form-item label="卡主姓名">
          <el-input v-model="formRow.cardowner" auto-complete="off" />
        </el-form-item>
        <el-form-item label="归属银行">
          <el-input v-model="formRow.bankname" auto-complete="off" />
        </el-form-item>
        <el-form-item label="银行卡号">
          <el-input v-model="formRow.bankcard" auto-complete="off" />
        </el-form-item>
        <!-- <el-form-item> -->
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>
    <!--列表数据添加/编辑结束  -->
  </div>
</template>

<script>
import { banks, bank_add, bank_edit } from '@/api/set'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { Message } from 'element-ui'
export default {
  name: 'Banks',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
       // 弹窗标题
      dialogTitle: '银行卡添加',
      dialogFormVisible: false,
      // 表单数据
      formRow: {
        cardowner: '',
        bankname: '',
        bankcard: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      banks().then(response => {
        console.log(response,'getList')
        this.list = response.data
        this.listLoading = false
      })
    },
     // 表单提交方法
    submitForm(formName) {
      console.log(this.formRow, 'submitForm')
      if (!this.formRow.id) { // 新增数据
        bank_add(this.formRow).then(res => {
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.dialogFormVisible = false
          this.getList()
        })
      } else { // 编辑数据
        bank_edit(this.formRow).then(res => {
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.dialogFormVisible = false
          this.getList()
        })
      }
    },
     // 编辑
    editShow(row) {
      this.formRow = row
      this.dialogTitle = '银行卡编辑'
      this.dialogFormVisible = true
    },
    closed() {
      this.formRow = {
        cardowner: '',
        bankname: '',
        bankcard: ''
      }
      this.dialogTitle = '银行卡添加'
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
